<template>
  <div id="menu-container" class="menu-container">
    <el-menu
      class="el-menu-vertical"
      :background-color="backgroundColor"
      :collapse="isCollapse"
      :collapse-transition="false"
      :unique-opened="true"
      @select="openMenu"
    >
      <sidebar-item
        v-for="item in menuList"
        :key="item.menuId"
        :item="item"
        :base-path="item.menuId"
      />
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import SidebarItem from "./sidebar-item.vue";
import { setMenuConfigCache } from "@/utils/IndexedDB";
export default {
  components: { SidebarItem },
  data() {
    return {
      loading: false,
      menuList: [],
      breadcrumbs: [],
    };
  },
  computed: {
    ...mapGetters(["isCollapse", "theme"]),
    backgroundColor() {
      return this.theme === "dark" ? "#131313" : "#ebf1f4";
    },
  },
  mounted() {
    if (sessionStorage.getItem("menus")) {
      this.menuList = JSON.parse(sessionStorage.getItem("menus"));
    } else {
      this.getListByWebRoleMenuType();
    }
  },
  methods: {
    // 获取菜单
    getListByWebRoleMenuType() {
      this.$_Api.Basics.getListByWebRoleMenuType().then((res) => {
        sessionStorage.setItem("menus", JSON.stringify(res));
        this.menuList = res || [];
        this.loading = false;
      });
    },
    async openMenu(name, path) {
      await setMenuConfigCache(name);
      this.$router.push(
        {
          name,
          query: {
            menuId: name,
          },
        },
        (page) => {
          if (page.meta.title && page.name && page.path) {
            const { path, name, meta } = page;
            this.$store.dispatch("app/openMenu", {
              path,
              name,
              meta,
            });
          } else {
            this.$router.push({
              name: "404",
            });
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.menu-container {
  width: 100%;
  height: calc(100% - 8px);
  border-radius: 4px;
  overflow: hidden;
  overflow-y: auto;
}

.menu-container::-webkit-scrollbar {
  display: none;
}

.el-menu-vertical {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--body-background);
  border: none;
}
</style>